import { Puck } from "@/puck";
import { ConfigPreview, PuckPreview } from "@/docs/components/Preview";
import { Callout } from "nextra/components";

# Textarea

Render a `textarea` input. Extends [Base](base).

<ConfigPreview
  label="Example"
  componentConfig={{
    fields: {
      description: {
        type: "textarea",
      },
    },
    render: ({ description }) => {
      return <p>{description}</p>;
    },
    defaultProps: { description: "Hello, world" },
  }}
/>

```tsx {5-7} copy
const config = {
  components: {
    Example: {
      fields: {
        description: {
          type: "textarea",
        },
      },
      render: ({ description }) => {
        return <p>{description}</p>;
      },
    },
  },
};
```

## Params

| Param                                 | Example                         | Type       | Status   |
| ------------------------------------- | ------------------------------- | ---------- | -------- |
| [`type`](#type)                       | `type: "textarea"`              | "textarea" | Required |
| [`contentEditable`](#contentEditable) | `contentEditable: true`         | Boolean    | -        |
| [`placeholder`](#placeholder)         | `placeholder: "Lorem ipsum..."` | String     | -        |

## Required params

### `type`

The type of the field. Must be `"textarea"` for Textarea fields.

```tsx {6} copy
const config = {
  components: {
    Example: {
      fields: {
        description: {
          type: "textarea",
        },
      },
      // ...
    },
  },
};
```

## Optional params

### contentEditable

Enable inline text editing for this field. Defaults to `false`.

<Callout type="warning">
  When setting `contentEditable`, your [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) prop will be converted to an [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) when rendered inside [`<Puck>`](/docs/api-reference/components/puck) (but not [`<Render>`](/docs/api-reference/components/render)). When using TypeScript, change your `string` to  `string | ReactNode`.
</Callout>

```tsx {7} copy
const config = {
  components: {
    Example: {
      fields: {
        description: {
          type: "textarea",
          contentEditable: true,
        },
      },
      // ...
    },
  },
};
```

<ConfigPreview
  label="Example"
  componentConfig={{
    fields: {
      description: {
        type: "textarea",
        contentEditable: true,
      },
    },
    defaultProps: {
      description:
        "You can edit this in the preview section, too.\nIt also supports line breaks.",
    },
    render: ({ description }) => {
      return <div>{description}</div>;
    },
  }}
>
  <Puck.Preview />
</ConfigPreview>

### Placeholder

The placeholder text to display when the field is empty.

```tsx {7} copy
const config = {
  components: {
    Example: {
      fields: {
        description: {
          type: "textarea",
          placeholder: "Lorem ipsum...",
        },
      },
      // ...
    },
  },
};
```

<ConfigPreview
  label="Example"
  componentConfig={{
    fields: {
      description: {
        type: "textarea",
        placeholder: "Lorem ipsum...",
      },
    },
    render: ({ description }) => {
      return <div>{description}</div>;
    },
  }}
/>
